<template>
    <orh-table reload  @on-reload="reload" add="add" @on-add="moralAdd" del="del" @on-del="prompt = true" pages :pageDate="pageDate" @on-page-change="queryData">
        <Table border stripe :columns="columns" @on-selection-change="selectOne" :data="data" :loading="tableload" slot="table"></Table>
        <orh-sidebar v-model="show" :title="titles" scale slot="others">
            <component :is="content" :condition="condition" :conditions="conditions" @requery="requery"></component>
        </orh-sidebar>
        <Modal v-model="prompt" title="数据删除" @on-ok="asyncOK" slot="others">
            <p>您确定要删除这些数据吗?</p>
        </Modal>
        
        <Button type="primary" slot="returntosuperior" style="margin-left: 10px;" @click="lookupData" size="small">查找</Button>

        <Modal v-model="urlState" title="现场照片" slot="others">
            <p><img :src="imgUrl" width="100%"></p>
        </Modal>

        <Modal v-model="lookupState" title="查找" :loading="lookupLoad" @on-ok="lookupSubmit" slot="others">
            <p>
                <Form ref="form" :model="form" :label-width="80">

                    <FormItem label="学年">
                        <RadioGroup v-model="form.schoolyear_id" @on-change="semesterData">
                            <Radio v-for="(item,index) in yearList" :key="index" :label="item.schoolyear_id">{{ item.schoolyear_name.zh?item.schoolyear_name.zh:item.schoolyear_name.mn }}</Radio>
                        </RadioGroup>
                    </FormItem>
                    
                    <FormItem label="学期">
                        <RadioGroup v-if="semesterList.length != 0" v-model="form.semester_id">
                            <Radio v-for="(item,index) in semesterList" :key="index" :label="item.semester_id">{{ item.semester_name.zh? item.semester_name.zh: item.semester_name.mn }}</Radio>
                        </RadioGroup>
                        <Radio v-if="semesterList.length == 0" disabled>暂无数据（请选择学年）</Radio>
                    </FormItem>

                    <FormItem label="年级">
                        <RadioGroup v-model="form.grade_id" @on-change="gradeChange">
                            <Radio v-for="(item,index) in gradeList" :key="index" :label="item.id">{{ item.grade_name.zh? item.grade_name.zh: item.grade_name.mn }}</Radio>
                        </RadioGroup>
                    </FormItem>

                    <FormItem label="班级">
                        <RadioGroup v-if="classList.length != 0" v-model="form.class_id">
                            <Radio v-for="(item,index) in classList" :key="index" :label="item.eclass_id">{{ item.eclass_name.zh?item.eclass_name.zh:item.eclass_name.mn }}</Radio>
                        </RadioGroup>
                        <Radio v-if="classList.length == 0" disabled>暂无数据（请选择年级）</Radio>
                    </FormItem>

                    <FormItem label="自习时间">
                        <RadioGroup v-model="form.types">
                            <Radio v-for="(item,index) in ridioList" :key="index" :label="item.key">{{ item.value }}</Radio>
                        </RadioGroup>
                    </FormItem>

                    <FormItem label="状态">
                        <RadioGroup v-model="form.section">
                            <Radio v-for="(item,index) in typeList" :key="index" :label="item.key">{{ item.value }}</Radio>
                        </RadioGroup>
                    </FormItem>

                    <FormItem label="值班时间">
                        <RadioGroup v-model="form.time">
                            <Radio v-for="(item,index) in timeList" :key="index" :label="item.key">{{ item.value }}</Radio>
                        </RadioGroup>
                    </FormItem>

                </Form>
            </p>
        </Modal>
    </orh-table>
</template>
                
<script>
export default {
    components: {
        DataAdd: resolve => {require(['./Add.vue'], resolve);},
        DataEdit: resolve => {require(['./Edit.vue'], resolve);},
    },
    data () {
        return {
            imgUrl: null,
            urlState:false,
            lookupState: false,
            lookupLoad: false,
            
            form: {
                grade_id: null,
                class_id: null,
                types: 1,
                section: null,
                time: 1,
                schoolyear_id: '',
                semester_id: ''
            },
            timeList: [
                {key: 1, value:'当天'},
                {key: 2, value:'全部'}
            ],
            typeList: [
                {key: null, value:'全部'},
                {key: 1, value:'未确认'},
                {key: 2, value:'已确认'}
            ],
            ridioList: [
                {key: '', value:'全部晚自习'},
                {key: 2, value:'第一晚自习'},
                {key: 3, value:'第二晚自习'},
                {key: 4, value:'第三晚自习'}
            ],
            gradeList: [],
            gradeUrl: 'api/base/v1/get/grade/list',
            classList: [],
            classUrl: 'api/eclass/v1/eclass/eclass_bes?grade_id=',

            prompt: false,
            show: false,
            content: null,
            titles: null,
            tableload: true,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            data: [],
            columns: [
                {
                    type: 'selection',
                    minWidth: 60,
                    align: 'center',
                },
                {
                    title: '班级信息',
                    align: 'center',
                    children: [
                        {
                            title: '年级',
                            minWidth: 120,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.grade.grade_name
                                return h('div', name)
                            }
                        },
                        {
                            title: '班级',
                            minWidth: 100,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.class.eclass_name
                                return h('div', name)
                            }
                        },
                        {
                            title: '实到人数',
                            minWidth: 100,
                            align: 'center',
                            key: 'classnumber',
                        },
                        {
                            title: '值班老师',
                            minWidth: 150,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.dutyteacher_name?params.row.dutyteacher_name.teacher_name:''
                                return h('div', name)
                            }
                        },
                        {
                            title: '值班自习',
                            minWidth: 150,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.types == '1'?'早自习':params.row.types == '2'?'第一晚自习':params.row.types == '3'?'第二晚自习':params.row.types == '4'?'第三晚自习':params.row.types == '5'?'早读':params.row.types == '6'?'自愿值班':''
                                return h('div', name)
                            }
                        },
                        {
                            title: '值班时间',
                            minWidth: 150,
                            align: 'center',
                            key: 'created_at',
                        },
                        {
                            title: '值班领导',
                            minWidth: 150,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.user_ids_name?params.row.user_ids_name.teacher_name:''
                                return h('div', name)
                            }
                        },
                    ]
                },
                {
                    title: '是否确认',
                    minWidth: 100,
                    align: 'center',
                    render: (h, params) => {
                        let name = params.row.section == '1'? '未确认':'已确认'
                        let color = params.row.section == '1'? '#ed3f14':'#47cb89'
                        return h('div', {
                            style: {
                                color: color
                            }
                        }, name)
                    }
                },
                {
                    title: '细则',
                    align: 'center',
                    children: [
                        {
                            title: '细则状态',
                            minWidth: 100,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.rules.classification
                                return h('div', {
                                    style: {
                                        color: name == 1?'#19be6b':'#ed3f14',
                                    }
                                }, name == 1?'加分':'减分')
                            }
                        },
                        {
                            title: '细则信息',
                            minWidth: 200,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.rules.entry_content
                                return h('div', name)
                            }
                        },
                    ]
                },
                {
                    title: '现场图片',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        if(params.row.img != null) {
                            return h('div', [
                                h('img', {
                                    attrs: {
                                        src: params.row.img
                                    },
                                    style: {
                                        width:'100px',
                                        height:'40px',
                                        verticalAlign: 'middle',
                                    },
                                    on: {
                                        click: () => {
                                            this.picture(params.row.img)
                                        }
                                    }
                                }),
                            ]);
                        }else{
                            return h('div', '暂无图片');
                        }
                    }
                },
                {
                    title: '备注',
                    minWidth: 150,
                    align: 'center',
                    render:(h,params)=> {
                        return h('span',params.row.remarks?params.row.remarks.zh?params.row.remarks.zh:params.row.remarks.mn:'')
                    },
                },
                {
                    title: '操作',
                    key: 'action',
                    minWidth: 150,
                    align: 'center',
                    fixed: 'right',
                    render: (h, params) => {
                        let type = params.row.section == '1'? false:true
                        return h('div', [
                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value: 'edit',
                                    }
                                ],
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    disabled: type
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.UpdateData(this.data[params.index].watchlist_column_id)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    title: '您确定要删除这条数据吗?',
                                    type: 'error',
                                    size: 'small',
                                    placement:'left-end'
                                },
                                style: {
                                    textAlign: 'left',
                                },
                                on: {
                                    'on-ok': () => {
                                        this.remove(this.data[params.index].watchlist_column_id)
                                    }
                                }
                            }, [
                                h('Button', {
                                    directives: [
                                        {
                                            name: 'button',
                                            value: 'del',
                                        }
                                    ],
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        disabled: type
                                    }
                                }, '删除')
                            ]),
                        ]);
                    }
                },
            ],
            url: 'api/watchlist/v1/watchlistfromdatas/list/12?page=',
            delUrl: 'api/watchlist/v1/watchlistfromdatas/del/',

            del: null,
            condition: null,
            conditions: false,
            condnum: '',

            yearUrl: 'api/semester/v1/schoolyear/info',
            yearList: [],
            semesterUrl: 'api/semester/v1/semester/all_semester?schoolyear_id=',
            semesterList: []
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 点击查找
         * 
         ************************************************************/
        lookupData () {
            this.form.grade_id = null
            this.form.class_id = null
            this.form.schoolyear_id = ''
            this.form.semester_id = ''
            this.form.section = null
            this.semesterList = []
            this.classList = []
            this.lookupState = true
        },
        
        /************************************************************
         * 
         * 搜索
         * 
         ************************************************************/
        lookupSubmit() {
            this.data = []
            this.tableload = true
            this.condnum = ''
            this.condnum += '&time='+ this.form.time 
            if(this.form.section != null)this.condnum += '&section='+ this.form.section
            if(this.form.grade_id != null)this.condnum += '&grade_id='+ this.form.grade_id
            if(this.form.class_id != null)this.condnum += '&class_id='+ this.form.class_id
            if(this.form.types != '')this.condnum += '&types='+ this.form.types
            if(this.form.schoolyear_id != '')this.condnum += '&schoolyear_id='+ this.form.schoolyear_id
            if(this.form.semester_id != '')this.condnum += '&semester_id='+ this.form.semester_id
            this.lookupLoad = true
            this.queryData(1)
        },
        
        /************************************************************
         * 
         * 查看图片
         * 
         ************************************************************/
        picture(src) {
            this.imgUrl = src
            this.urlState = true
        },
        
        /************************************************************
         * 
         * 添加数据
         * 
         ************************************************************/
        moralAdd() {
            this.titles = '添加数据'
            this.show = true
            this.content = 'DataAdd'
        },
        
        /************************************************************
         * 
         * 单条删除数据
         * 
         ************************************************************/
        remove (index) {
            this.del = []
            this.del.push(index)
            this.asyncOK()
        },
        
        /************************************************************
         * 
         * 批量删除数据
         * 
         ************************************************************/
        selectOne(index){
            this.del = []
            index.forEach(item => {
                this.del.push(item.watchlist_column_id)
            });
        },
        
        /************************************************************
         * 
         * 执行删除操作
         * 
         ************************************************************/
        asyncOK () {
            this.del = JSON.stringify(this.del)
            this.$http.delete(this.delUrl+this.del).then(val=>{
                this.prompt = false
                this.data = []
                this.tableload = true
                this.queryData(this.pageDate.current_page)
            }).catch(err => {
                console.log(err)
            })
        },
        
        /************************************************************
         * 
         * 当添加或修改数据后刷新数据
         * 
         ************************************************************/
        requery(state){
            if(state == true){
                this.show = false
                this.data = []
                this.tableload = true
                this.queryData(this.pageDate.current_page)
            }
        },
        
        /************************************************************
         * 
         * 修改数据
         * 
         ************************************************************/
        UpdateData(index){
            this.condition = index
            this.conditions = false
            this.titles = '修改数据'
            this.show = true
            this.content = 'DataEdit'
        },
        
        /************************************************************
         * 
         * 确认数据
         * 
         ************************************************************/
        UpdateDatas(index){
            this.condition = index
            this.conditions = true
            this.titles = '确认数据'
            this.show = true
            this.content = 'DataEdit'
        },
        
        /************************************************************
         * 
         * 手动刷新数据
         * 
         ************************************************************/
        reload(){
            this.data = []
            this.condnum = ''
            this.tableload = true
            this.queryData(this.pageDate.current_page)
        },
        
        /************************************************************
         * 
         * 请求列表数据
         * 
         ************************************************************/
        queryData(index){
            this.tableload = true
            this.$http.get(this.url + index + this.condnum).then(val=>{
                this.pageDate.per_page = val.pages.per_page
                this.pageDate.total = val.pages.total
                this.pageDate.current_page = val.pages.current_page
                this.data = val.data
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        },
        
        /************************************************************
         * 
         * 请求年级数据
         * 
         ************************************************************/
        gradeData(){
            this.$http.get(this.gradeUrl).then(val => {
                this.gradeList = val.data
            }).catch(err => {
                this.$Message.info('年级信息获取失败');
            })
        },
        
        /************************************************************
         * 
         * 点击年级
         * 获取班级数据
         * 
         ************************************************************/
        gradeChange(index){
            this.classList = []
            this.form.class_id = null
            this.$http.get(this.classUrl + index).then(val => {
                this.classList = val.data
            }).catch(err => {
                this.$Message.info('班级信息获取失败');
            })
        },
        
        /************************************************************
         * 
         * 请求学年数据
         * 
         ************************************************************/
        yearData(){
            this.$http.get(this.yearUrl).then(val=>{
                this.yearList = val.data
            }).catch(err => {
                console.log(err)
            })
        },
        
        /************************************************************
         * 
         * 点击学年
         * 获取学期数据
         * 
         ************************************************************/
        semesterData(index){
            this.$http.get(this.semesterUrl + index).then(val=>{
                this.semesterList = val.data
            }).catch(err => {
                console.log(err)
            })
        },
    },
    created(){
        this.queryData(1)
        this.gradeData()
        this.yearData()
    },
};
</script>

